<!DOCTYPE html>
<html>
	
	<head>
		<meta charset="utf-8">

		<!-- !Always force latest IE rendering engine (even in intranet) & Chrome Frame
		Remove this if you use the .htaccess -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

		<title>07_JavaScript_window</title>
		<meta name="description" content="">
		<meta name="author" content="chenyong">

		<meta name="viewport" content="width=device-width; initial-scale=1.0">
 
		<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
		<link rel="shortcut icon" href="/favicon.ico">
		<link rel="apple-touch-icon" href="/apple-touch-icon.png">
		
		<style type="text/css">
			
			
			body{
				margin:50px;
			}
			
			div{
				font-size:12px;
			}
			
			div.box{
				margin-top:30px;
			}
		
			
		</style>
		
		<script type="text/javascript">
		
			
			function chgStyle(){
				var item = document.getElementById('p1');
				item.innerHTML = '过了3秒，文字内容改变';
				item.style.fontSize = '20px';
				item.style.fontWeight = 'bold';
			}
			
			function fn1(){
				setTimeout("chgStyle()",3000);
			}
			
			
			
			var flag = 1; 
			
			function bigger(){
				var item = document.getElementById('p2');
				var size = item.style.fontSize;
				//console.log(size);
				size = parseInt(size);
				if(size){
					
					if(size >= 30){
						flag = 0;
						item.innerHTML = '开始变小';
					}else if (size <= 12){
						flag = 1;
						item.innerHTML = '开始变大';
					}
					
					if(flag){
						item.style.fontSize = size + 2 + 'px';
					}else{
						item.style.fontSize = size - 2 + 'px';
					}
				}else{
					item.style.fontSize = '12px';
				}
			}
			
			var timer;
			function fn2(){
				
				var item = document.getElementById('p2');
				console.log(timer);
				if(!timer){
					timer = setInterval("bigger()",100);
					item.innerHTML = '点击停止';
				}else{
					clearInterval(timer);
					item.innerHTML = '点击开始';
					timer = null;
				}
			}
			
		</script>
	</head>
	
	<body>
		
			
		<h3>07_JavaScript_window</h3>
		
		<div class="box" >
			<p><b>setTimeout暂停</b></p>
			<p>setTimeout(chgStyle(),3000)表示在多少毫秒后执行一次这个方法</p>
			<p id="p1" onclick="fn1()" style="cursor: pointer">点击变大</p>
		</div>
		
		
		<div class="box" >
			<p><b>setInterval</b></p>
			<p>setInterval("bigger()",1000);表示每隔多少毫秒就执行一次</p>
			<p>函数名称为字符形式，且不能包含参数</p>
			<p>setInterval的返回值为ID值，通过clearInterval(ID值)可以停止这个定时器</p>
			<p id="p2" onclick="fn2(this)" style="cursor: pointer">点击启动定时器</p>
		</div>
	
	
	</body>
	
</html>